<template>
  <div class="visitor">
    <div
      :class="[
        'flex',
        { 'flex-horizontal-between': isbuildFlag != 'nobuildpage' },
        { 'flex-vertical-end ': isbuildFlag == 'nobuildpage' }
      ]">
      <p class="title">来人统计</p>
      <p class="view-more" style="margin-left: 20px" v-if="isbuildFlag == 'nobuildpage'">
        点击下方数字可查看明细
      </p>
      <div class="flex flex-vertical-center" v-else>
        <p class="hand view-more" @click="viewMore('customerVisit')" style="margin-left: 20px">
          查看更多
          <span style="margin-left: 5px">></span>
        </p>
      </div>
    </div>
    <div class="flex">
      <ul class="flex flex-horizontal-between visitor-content">
        <li
          v-for="(item, index) in homeDataList.visitorList"
          @click="
            linkPageFun(
              isbuildFlag == 'nobuildpage' ? customerSummary[item.key] : customerSummary[item.linkKey],
              item,
              checkParams
            )
          "
          :key="index"
          :class="[
            'flex',
            'flex-vertical-center',
            'flex-wrap',
            'position-relative',
            'hand',
            { line: index == 0 }
          ]">
          <p class="text-center num width-100">{{ customerSummary[item.key] || 0 }}</p>
          <Tooltip
            v-if="item.tips"
            class="position-absolute"
            theme="light"
            placement="top-start"
            style="top: 0px; right: 20%">
            <Icon type="ios-help-circle-outline" color="#2d8cf0" :size="24" />
            <template slot="content">
              <p v-for="(tipsItem, tipsIndex) in item.tips" :key="tipsIndex">
                {{ tipsItem }}
              </p>
            </template>
          </Tooltip>
          <p class="text-center text width-100">{{ dataText }}{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  import { linkPage } from '@/biz/buildingHome/linkPage'
  export default {
    mixins: [linkPage],
    data() {
      return {
        isbuildFlag: 'buildpage',
        homeDataList: {},
        customerSummary: {}, // 客户
        dataText: '今日',
        checkParams: {}
      }
    },
    components: {},
    computed: {},
    watch: {},
    methods: {
      // 数据初始化
      dataInit(checkParams, dataText, res = {}) {
        this.dataText = dataText
        this.checkParams = checkParams

        this.isbuildFlag = this.$tool.getStorage('isbuildFlag')
        // 默认选中当天
        this.homeDataList = homeMgr.homeDataList()
        this.customerSummary = res.customer
      },
      // 来访客户
      getCustomerVisit(params) {
        homeMgr
          .getCustomerVisit(params)
          .then((res) => {
            this.customerSummary = res
          })
          .catch((err) => {
            this.customerSummary = {}
          })
      }
    },
    created() {},
    mounted() {}
  }
</script>
<style lang="scss" scoped>
  .visitor {
    background-color: #fff;
    padding: 20px 15px;
    width: 49.5%;
    border-radius: 5px;
    .line {
      border-right: 1px #dcdee2 solid;
    }

    .title {
      padding-left: 8px;
      color: #222;
      font-size: 18px;
      border-left: 2px solid #2298ff;
      font-weight: bolder;
    }

    .num {
      font-size: 24px;
      font-weight: bold;
      color: #222222;
    }

    .text {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }

    .view-more {
      font-size: 12px;
      color: #2298ff;
    }
    .visitor-content {
      margin-top: 20px;
      li {
        padding: 0 20px;
      }
    }
  }
</style>
